<template>
  <div>
    <van-sticky>
    <van-tabs
     v-model="active"
     title-active-color= "#ff5f16"
      @change="tabchange">
      <van-tab title="正在热映"></van-tab>
      <van-tab title="即将上映"></van-tab>
    </van-tabs>
  </van-sticky>
    <router-view/>
  </div>
</template>

<script>
export default {
   data(){
    return{
        active:0
    }
   },
   watch:{
    //事件监听 $route
        $route:function(){
          // 把this.$route.name赋值给name
          const name = this.$route.name;
       //判断如果name的值等于hot   
    if(name=='hot'){
      //那么就this.active赋值为0 显示对应的高亮
        this.active = 0
        // 如果name的值等于soon
    }else if(name=='soon'){
      // this.active赋值为 1显示对应的高亮
        this.active = 1
    }

        }
   },
   mounted(){
    const name = this.$route.name;
    if(name=='hot'){
        this.active = 0
    }else if(name=='soon'){
        this.active = 1
    }
   },
   methods:{
    //点击跳转对应的路由
    tabchange(name,title){
      //如果name等于0那么则说明点击是正在热映
        if(name==0){
            this.$router.replace({name:'hot'})
        }else{
          // 否则则说明点击是即将上映
              this.$router.replace({name:'soon'})
        }
    }
   }
}
</script>

<style>

</style>